<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="650"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px"
  >
    <a-checkbox-group v-model="checkedList" v-if="plainOptions && plainOptions.length">
      <a-checkbox :value="item.id" v-for="(item, index) in plainOptions" :key="index">{{ item.name }}</a-checkbox>
    </a-checkbox-group>
    <a-empty v-else description="暂无数据" />
    <div class="drawer-bootom-button">
      <a-button @click="handleCancel" style="margin-right: 0.8rem">取消</a-button>
      <a-button @click="handleSubmit" type="primary" style="margin-right: 0.8rem">确定</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { getAction, putAction } from '@/api/manage';
export default{
  name: 'CategoryGroupModal',
  data(){
    return {
      title: '',
      visible: false,
      plainOptions: [],
      checkedList: [],
      username: '',
      url: {
        queryByUsername: "/hzkj-product/product/productLibrary/categoryGroup/queryByUsername",
        updateByUsername: "/hzkj-product/product/productLibrary/categoryGroupUser/updateByUsername",
        list: "/hzkj-product/product/productLibrary/categoryGroup/list"
      }
    }
  },
  methods: {
    show(username){
      this.username = username;
      this.visible = true;
      this.loadData();
      this.queryByUsername();
    },
    close(){
      this.visible = false;
    },
    loadData(){
      let params = {
        column: 'createTime',
        order: 'desc',
        pageNo: 1,
        pageSize: 9999
      }
      getAction(this.url.list, params).then((res) => {
        if(res.success){
          this.plainOptions = (res.result && res.result.records) || [];
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    queryByUsername(){
      getAction(this.url.queryByUsername, { username: this.username }).then((res) => {
        if(res.success){
          let checkedList = res.result || [];
          this.checkedList = checkedList.map(item => item.id);
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    handleCancel(){
      this.checkedList = [];
      this.visible = false;
    },
    handleSubmit(){
      if(!(this.checkedList && this.checkedList.length)){
        this.$message.warning('请选择类目组！');
        return;
      }
      let params = {
        categoryGroupIdList: this.checkedList,
        username: this.username
      }
      putAction(this.url.updateByUsername, params).then((res) => {
        if(res.success){
          this.$message.success(res.message);
          this.handleCancel();
          this.$emit('ok');
        }else{
          this.$message.warning(res.message);
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
}
</style>